<template>
  <div class="item" @click="handleNav">
    <div class="item-img" :class="itemInfo.style">
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="itemInfo.icon" />
      </svg>
    </div>
    <div class="item-tip">{{ itemInfo.name }}</div>
  </div>
</template>

<script>
export default {
  props: ["itemInfo"],
  data() {
    return {};
  },
  methods: {
    handleNav() {
      if (this.itemInfo.path === "tuichu") {
        this.$router.push("/").catch((err) => {
          err;
        });
        return;
      }
      this.$router.push("/main/" + this.itemInfo.path).catch((err) => {
        err;
      });
      this.$emit("nvaClick", this.itemInfo.name);
      this.$store.commit("NavStyleClear", this.itemInfo.name);
      // this.itemInfo.style["item-img-after"] = true;
    },
  },
};
</script>

<style>
.item {
  height: 56px;
  text-align: center;
  line-height: 56px;
  position: relative;
  z-index: 1000;
}

.item:hover .item-tip {
  display: block;
}

.item-img {
  color: white;
  font-size: 24px;
}

.item-img-after {
  border-left: 2px solid rgba(0, 110, 255, 1);
  color: dodgerblue;
  background-color: rgba(8, 12, 39, 1);
  font-size: 24px;
}

.item-img svg use {
  font-size: 14px;
}

.item-img a:link {
  color: white;
}

.item-img a:visited {
  color: white;
}

.item:hover .item-img {
  color: dodgerblue;
}

.item-tip {
  width: 60px;
  height: 40px;
  line-height: 40px;
  color: white;
  position: absolute;
  top: 8px;
  left: 79px;
  background-color: #333333;
  border-radius: 4px;
  z-index: 1;
  display: none;
}

.item-tip::before {
  content: "";
  height: 0px;
  width: 0px;
  border-top: 10px solid transparent;
  border-right: 10px solid #333333;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  position: absolute;
  left: -20px;
  top: 10px;
}
</style>